<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, onBeforeRouteUpdate } from 'vue-router'

const route = useRoute();
const userId = route.params.id; // 获取传递过来的id
console.log('User Id：', userId)

let student = ref({});

// 如果是User里面内部切换
// 用户A直接切换到用户B，需要使用onBeforeRouteUpdate(99.999%用不到)
// onBeforeRouteUpdate((to, from) => {
//     console.log(from.params.id);
//     console.log(to.params.id);
// })

onMounted(() => {
    // 模拟获取数据
    const data = [{ id: 1, name: '小张', age: 22 }, { id: 2, name: '小李', age: 33 }, { id: 3, name: '小王', age: 44 }];
    student.value = data.find(item => item.id == userId);
})
</script>

<template>
    <div>
        <h2>User Id:{{ $route.params.id }}</h2>
        {{ student.id }}.{{ student.name }}-{{ student.age }}
    </div>
</template>